<template>
    <div style="overflow-y: scroll; overflow-x: hidden; height: 100vh">
        <div style="width: 90%; margin: 20px auto 0" ref="printContent">
            <div style="overflow: hidden; width: 100%">
                <el-button type="primary" size="small" style="float: right" v-print="printObj">打印</el-button>
            </div>
            <!-- padding:10px 30px -->
            <div style="max-width: 100%" id="print-content">
                <table class="table-1">
                    <tr>
                        <td colspan="4" style="font-weight: 700; padding: 6px; font-size: 14px">
                            出租经营{{
                                projectdetail.htlx == '1'
                                    ? '续期'
                                    : projectdetail.htlx == '2'
                                    ? '终止'
                                    : projectdetail.htlx == '3'
                                    ? '补充'
                                    : ''
                            }}
                        </td>
                    </tr>
                    <tr style="background-color: #f5fafa">
                        <td style="text-align: center; width:20%">合同类型:</td>
                        <td style="width:40%">
                            {{
                                projectdetail.htlx == '1'
                                    ? '租赁续期'
                                    : projectdetail.htlx == '2'
                                    ? '租赁终止'
                                    : projectdetail.htlx == '3'
                                    ? '租赁补充'
                                    : ''
                            }}
                        </td>
                        <td style="text-align: center; width:20%">合同编号:</td>
                        <td style="width:40%">
                            {{ projectdetail.htbh }}
                        </td>
                    </tr>
                    <template v-for="(adlistitem, index) in projectdetail.buildList">
                        <tr>
                            <td style="text-align: center; width:20%">房屋地址:</td>
                            <td colspan="3">
                                {{ adlistitem.fwdz }}
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: center; width:20%">档案号:</td>
                            <td style="width:40%">
                                {{ adlistitem.dabh }}
                            </td>
                            <td style="text-align: center; width:20%">产权单位:</td>
                            <td style="width:40%">
                                {{ adlistitem.cqdw }}
                            </td>
                        </tr>
                        <tr style="background-color: #f5fafa">
                            <td style="text-align: center; width:20%">建筑面积:</td>
                            <td style="width:40%">
                                {{ adlistitem.jzmj }}
                            </td>
                            <td style="text-align: center; width:20%">房屋性质:</td>
                            <td style="width:40%">
                                {{ adlistitem.fwyt }}
                            </td>
                        </tr>
                    </template>
                    <tr>
                        <td style="text-align: center; width:20%">出租地址:</td>
                        <td style="width:40%">
                            {{ projectdetail.czdz }}
                        </td>
                        <td style="text-align: center; width:20%">实际出租面积:</td>
                        <td style="width:40%">
                            {{ projectdetail.czmj }}
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align: center; width:20%">承租人:</td>
                        <td style="width:40%">
                            {{ projectdetail.czr }}
                        </td>
                        <td style="text-align: center; width:20%">租赁用途:</td>
                        <td style="width:40%">
                            {{ projectdetail.zlyt }}
                        </td>
                    </tr>
                    <tr style="background-color: #f5fafa">
                        <td style="text-align: center; width:20%">{{ projectdetail.type == '2' ? '租金单价:' : '月租金:' }}</td>
                        <td v-if="projectdetail.type == '2'" style="width:40%">
                            {{ projectdetail.zjdj ? projectdetail.zjdj + '元/M²·天' : '' }}
                        </td>
                        <td v-else style="width:40%">
                            {{ projectdetail.zjdj ? projectdetail.zjdj + '元/月' : '' }}
                        </td>
                        <!-- <td style="text-align: center;width:100px;">租赁期限:</td>
                        <td>
                            {{ projectdetail.zlqx ? projectdetail.zlqx : '0' }}个月
                        </td> -->
                        <td style="text-align: center; width:20%">租赁起始时间:</td>
                        <td style="width:40%">
                            {{ projectdetail.zlqssj ? projectdetail.zlqssj.split(' ')[0] : '' }}
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align: center; width:20%">租赁到期时间:</td>
                        <td style="width:40%">
                            {{ projectdetail.zldqsj ? projectdetail.zldqsj.split(' ')[0] : '' }}
                        </td>
                        <td style="text-align: center; width:20%">合同金额:</td>
                        <td>
                            {{ projectdetail.htje }}
                        </td>
                    </tr>
                    <tr>
                        <td colspan="4" style="font-weight: 700; padding: 1px; font-size: 20px">----------</td>
                    </tr>
                    <!-- 新数据 -->
                    <tr v-if="projectdetail.htlx == '1'">
                        <td style="text-align: center; width:20%">承租人:</td>
                        <td style="width:40%">
                            {{ projectdetail.xqczr }}
                        </td>
                        <td style="text-align: center; width:20%">续期租赁用途:</td>
                        <td style="width:40%">
                            {{ projectdetail.xqzlyt }}
                        </td>
                    </tr>
                    <tr style="background-color: #f5fafa" v-if="projectdetail.htlx == '1'">
                        <td style="text-align: center; width:20%">{{ projectdetail.type == '2' ? '续期租金单价:' : '续期月租金:' }}</td>
                        <td v-if="projectdetail.type == '2'" style="width:40%">
                            {{ projectdetail.xqzjdj ? projectdetail.xqzjdj + '元/M²·天' : '' }}
                        </td>
                        <td v-else style="width:40%">
                            {{ projectdetail.xqzjdj ? projectdetail.xqzjdj + '元/月' : '' }}
                        </td>
                        <!-- <td style="text-align: center;width:100px;">续期租赁期限:</td>
                        <td>
                            {{ projectdetail.xqzlqx ? projectdetail.xqzlqx : '0' }}个月
                        </td> -->
                    </tr>
                    <tr v-if="projectdetail.htlx == '1'">
                        <td style="text-align: center; width:20%">续期租赁起始时间:</td>
                        <td style="width:40%">
                            {{ projectdetail.xqzlqssj ? projectdetail.xqzlqssj.split(' ')[0] : '' }}
                        </td>
                        <td style="text-align: center; width:20%">续期租赁到期时间:</td>
                        <td style="width:40%">
                            {{ projectdetail.xqzldqsj ? projectdetail.xqzldqsj.split(' ')[0] : '' }}
                        </td>
                    </tr>
                    <tr style="background-color: #f5fafa" v-if="projectdetail.htlx == '2'">
                        <td style="text-align: center; width:20%">终止日期:</td>
                        <td style="width:40%">
                            {{ projectdetail.htzzsj ? projectdetail.htzzsj.split(' ')[0] : '' }}
                        </td>
                        <td style="text-align: center; width:20%">终止原因:</td>
                        <td style="width:40%">
                            {{ projectdetail.htzzyy }}
                        </td>
                    </tr>
                    <tr style="background-color: #f5fafa">
                        <td style="text-align: center; width:20%" v-if="projectdetail.htlx == '1'">续期合同金额:</td>
                        <td v-if="projectdetail.htlx == '1'" style="width:40%">
                            {{ projectdetail.xqhtje }}
                        </td>
                        <td style="text-align: center; width:20%">经办人签字:</td>
                        <td :colspan="projectdetail.htlx == '1' ? '1' : '3'" style="width:40%">
                            {{ projectdetail.jbrqz }}
                        </td>
                    </tr>
                    <!-- <tr>
                        <td style="text-align: center;width:100px;">是否转办件:</td>
                        <td>
                            {{ projectdetail.sfzbj }}
                        </td>
                    </tr> -->
                    <tr>
                        <td style="text-align: center; width:20%">中心党委会纪要编号:</td>
                        <td colspan="3" style="width:40%">
                            {{ projectdetail.jybh }}
                        </td>
                    </tr>
                    <tr style="background-color: #f5fafa">
                        <td style="text-align: center; width:20%">办件事由:</td>
                        <td colspan="3" style="width:40%">
                            {{ projectdetail.bjsy }}
                        </td>
                    </tr>
                    <tr>
                        <td colspan="4" style="font-weight: 700">文件</td>
                    </tr>
                    <tr>
                        <td>文件类型</td>
                        <td>文件</td>
                        <td>是否需要盖章</td>
                        <td>盖章类型</td>
                        <!-- <td style="font-weight: 700">文件名称</td> -->
                    </tr>
                    <tr v-for="(fileitem, index) in filetable" :key="index">
                        <td>{{ fileitem.yjlx }}</td>
                        <td>{{ fileitem.wjmc }}</td>
                        <td>{{ fileitem.sfgz }}</td>
                        <td>{{ fileitem.gzlx }}</td>
                        <!-- <td>{{ fileitem.yjbz }}</td> -->
                    </tr>
                    <tr>
                        <td colspan="4" style="font-weight: 700">审批意见</td>
                    </tr>
                    <tr v-for="(item, index) in tableData" :key="index">
                        <td style="text-align: center;width: 200px;" >{{ item.spyjmc }}:</td>
                        <td colspan="3">
                            {{ item.spyj }}
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</template>

<script>
import print from 'vue-print-nb';
import { wdswdydetails } from '@/api/index';

export default {
    data: function () {
        return {
            printObj: {
                id: 'print-content'
                // popTitle: '测试表单', // 如果不设置 默认是没有值即 undifined
            },
            gdform: {},
            projectdetail: {},
            tableData: [],
            fileform: {},
            form: {},
            filetable: [],
            type: this.$store.getters.type //分类 1:房间 2：楼栋
        };
    },
    directives: {
        print
    },
    methods: {
        wdswdydetails(data) {
            wdswdydetails(data).then((res) => {
                console.log('res', res);
                this.projectdetail = res.data.processtableInfo; //基础数据
                this.filetable = res.data.fileList; //文件数据
                this.tableData = res.data.spyjList; //审批意见
            });
        }
    },
    mounted() {
        let data = {
            caseid: this.$route.query.id
        };
        this.wdswdydetails(data);
    }
};
</script>

<style scoped>
/* @page {
    size: A4;
    margin: 0mm;
} */
</style>
<style>
@media print {
    @page {
        size: A4;
        margin: 8mm 20mm 4mm;
    }
    body,
    html,
    div {
        height: auto !important;
    }
    body {
        width: 100%;
        /* zoom:75% */
    }
}
table {
    width: 100%;
    margin: auto;
    text-align: center;
}

.table-1 {
    border: 1px solid #abacae;
    border-collapse: collapse;
    /*合并相邻表格的间距*/
}

.table-1 tr,
.table-1 td {
    font-size: 13px;
    border-collapse: collapse;
    border: 1px solid #abacae;
    /* padding: 4px; */
    box-sizing: border-box;
    color: #000000;
}

.table-2 {
    border: 1px solid #abacae;
    border-bottom: none;
    border-collapse: collapse;
    /*合并相邻表格的间距*/
}

.table-2 tr,
.table-2 td {
    font-size: 13px;
    border-collapse: collapse;
    border: 1px solid #abacae;
    /* border-bottom: none; */
    /* padding: 4px; */
    box-sizing: border-box;
    color: #000000;
}
</style>